<template>
  <div>
    <span style="margin-right: 10px;font-weight: bold">所属公司</span>
    <el-select v-model="org" placeholder="请选择公司" style="width: 300px" @change="getDeptByOrg">
      <el-option
        v-for="item in orgList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <div style="margin: 5px 0px" />
    <span style="margin-right: 10px;font-weight: bold">所属部门</span>
    <el-select v-model="dept" placeholder="请选择部门" style="width: 300px;" @change="getEmpByDept">
      <el-option
        v-for="item in deptList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <div>
      <div style="margin: 25px 0px" />
      <span style="margin-right: 10px;font-weight: bold">人员列表</span>
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"><span style="color: darkred">全选</span></el-checkbox>
      <div style="margin: 15px 0;" />
      <el-checkbox-group v-model="checkedEmpList" style="padding: 10px" @change="changeCheck">
        <el-checkbox v-for="(emp,index) in empList" :key="index" :label="emp.userId" style="margin-top:5px">{{ emp.name }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <div>
      <el-button @click="confirm">确认选择</el-button>
      已选择{{ checkedEmpList.length }}人
    </div>

  </div>
</template>
<script>
import { getEmpListByDept, getDeptList, getOrgList } from '@/api/user'
export default {
  data() {
    return {
      deptList: [],
      empList: [],
      dept: '',
      org: '',
      checkedEmpList: [],
      isIndeterminate: false,
      checkAll: false,
      orgList: [],
      allCheckedEmpList: []
    }
  },
  mounted() {
    this.initOrgList()
  },
  methods: {
    initOrgList() {
      getOrgList().then(res => {
        this.orgList = res.data
      })
    },
    getEmpByDept() {
      this.checkAll = false
      const params = {
        deptId: this.dept
      }
      getEmpListByDept(params).then(res => {
        this.empList = res.data
      })
    },
    getDeptByOrg() {
      const params = {
        orgId: this.org
      }
      getDeptList(params).then(res => {
        this.deptList = res.data
      })
    },
    // 全选
    handleCheckAllChange(val) {
      // 点击非全选的时候，只清空当前empList中的数据
      const checkedUserIdList = []
      this.empList.forEach(item => {
        checkedUserIdList.push(item.userId)
      })
      this.allCheckedEmpList = this.allCheckedEmpList.concat(checkedUserIdList)
      if (!val) {
        this.allCheckedEmpList = this.allCheckedEmpList.filter(item => {
          return checkedUserIdList.every(itemB => {
            return itemB !== item
          })
        })
      }
      this.checkedEmpList = this.allCheckedEmpList
      // 对已选择的人员进行去重
      this.checkedEmpList = this.checkedEmpList.filter((item, index) => {
        return this.checkedEmpList.indexOf(item) === index
      })
      this.isIndeterminate = false
    },
    changeCheck(val) {
      console.log(val)
      this.checkedEmpList = val
    },
    confirm() {
      this.$emit('getEmpList', this.checkedEmpList)
    }
  }
}
</script>
